<template>
  <div class="hv-form-property-container">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="baseProperty" header="基本属性">
        <hv-base-props-group :compData="propData" />
      </a-collapse-panel>
      <a-collapse-panel key="styleProperty" header="样式属性">
        <div class="hv-form-data-container">
          <a-row>
            <a-col :span="24" class="hv-visual-property-label">背景图：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <hv-background-image
                v-if="propData && propData.styleProps"
                :compData="propData"
              />
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">背景色：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <hv-color-dropdown-picker
                v-if="propData && propData.styleProps"
                v-model:color="propData.styleProps.backgroundColor"
                size="small"
              />
            </a-col>
          </a-row>

          <hv-border-style-group :compData="propData" />
          <hv-transform-group :compData="propData" />
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import BasePropsGroup from "../common/BasePropsGroup.vue";
import BackgroundImage from "../common/BackgroundImage.vue";
import ColorDropdownPicker from "@/visual/components/color-picker/ColorDropdownPicker.vue";
import BorderStyleGroup from "../common/BorderStyleGroup.vue";
import TransformGroup from "../common/TransformGroup.vue";
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import useVisualProperty from "@/visual/hooks/use-visual-property";

export default defineComponent({
  name: "GroupProperty",
  components: {
    hvColorDropdownPicker: ColorDropdownPicker,
    hvBasePropsGroup: BasePropsGroup,
    hvBackgroundImage: BackgroundImage,
    hvTransformGroup: TransformGroup,
    hvBorderStyleGroup: BorderStyleGroup,
  },
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<any>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const { activeKey, propData } = useVisualProperty<any>(props);

    return {
      activeKey,
      propData,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./GroupProperty.less";
</style>
